// 轮播1****************************************************
class Swiper {
    constructor() {
        this.w = $('.swiper-item').width();
        this.num = 0;
        this.len = $('.swiper .swiper-item').length - 1;
        this.timer = null;
    }
    init() {
        //设置定时器
        this.setTime();
        //滑上停止定时器
        this.hover();
        //移入指示
        this.pointClick();
    }
    setTime() {
        this.timer = setInterval(() => {
            this.num++;
            if (this.num > this.len) {
                this.num = 0;
            }
            let cssTrx = -this.num * this.w;
            $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
            $('.swiper').css({
                transform: `translateX(${cssTrx}px)`
            })
        }, 3000)
    }
    hover() {
        $('.swiper-contione').hover(() => {
            clearInterval(this.timer)
        }, () => {
            this.setTime();
        });
    }
    pointClick() {
        let that = this;
        $('.swiper-point-item .point').mouseover(function() {
            that.num = $(this).index();
            let cssTrx = -that.num * that.w;
            $(this).addClass('active').siblings().removeClass('active');
            $('.swiper').css({
                transform: `translateX(${cssTrx}px)`
            })
        })
    }
}
let sw = new Swiper();
sw.init();


// 轮播2*****************************************************
// 匀速动画
function animationFun1(ele, target) {
    // 先清除另外一个方向的定时器
    clearInterval(ele.interId);
    // 把定时器的id设置到DOM元素上
    ele.interId = setInterval(function() {
        // 当到达目标时,进行清除定时器
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
            // 向右走
        } else if (ele.offsetLeft < target) {
            var dis = (ele.offsetLeft + 13) > target ? target : (ele.offsetLeft + 13);
            ele.style.left = dis + 'px';
            // 向左走
        } else if (ele.offsetLeft > target) {
            var dis = (ele.offsetLeft - 13) < target ? target : (ele.offsetLeft - 13);
            ele.style.left = dis + 'px';
        };
    }, 50);
};
// 缓慢动画
function animationFun2(ele, target) {
    // 先清除另外一个方向的定时器
    clearInterval(ele.interId);
    // 把定时器的id设置到DOM元素上
    ele.interId = setInterval(function() {
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
        } else {
            var step = (target - ele.offsetLeft) / 10;
            // 当step为小数时,进行上下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            ele.style.left = ele.offsetLeft + step + 'px';
        }
    }, 20);
};

var viewpage = document.getElementsByClassName('viewpage')[0];
var circles = document.getElementsByClassName('circle');
var calList = document.getElementsByClassName('cal_list')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];

calList.onmouseover = function() {
    prev.style.display = 'block';
    next.style.display = 'block';
    clearInterval(viewpage.autoId);
};
calList.onmouseout = function() {
    prev.style.display = 'none';
    next.style.display = 'none';
    autoplay();
};
var flag = 0;
var count = 0;

function backstart(ele) {
    for (var i = 0; i < ele.length; i++) {
        ele[i].className = 'circle';
    }
};
next.onclick = function() {
    flag++;
    if (flag == circles.length) {
        flag = 0;
    }
    backstart(circles);
    circles[flag].className = 'circle active';
    count++;

    if (count == viewpage.children.length) {
        viewpage.style.left = 0;
        count = 1;
    };
    var target = count * (-600);
    animationFun2(viewpage, target);
};
prev.onclick = function() {
    flag--;
    if (flag < 0) {
        flag = circles.length - 1;
    }
    backstart(circles);
    circles[flag].className = 'circle active';
    if (count == 0) {
        count = viewpage.children.length - 1;
        viewpage.style.left = count * (-600) + 'px';
    };
    count--;
    var target = count * (-600);
    animationFun2(viewpage, target);
}

function autoplay() {
    viewpage.autoId = setInterval(function() {
        next.onclick();
    }, 3000)
};
autoplay();

for (var i = 0; i < circles.length; i++) {
    circles[i].index = i;
    circles[i].onmouseover = function() {
        flag = this.index;
        count = this.index;
        for (var j = 0; j < circles.length; j++) {
            circles[j].className = 'circle';
        };
        this.className = "circle active";
        var target = this.index * (-600);
        animationFun2(viewpage, target);
    }
};

$('.prev,.next').hover(function() {
    $(this).css({
        'backgroundColor': 'black',
        'opacity': 1
    });
}, function() {
    $(this).css({
        'backgroundColor': '',
        'opacity': 0.6
    });
});